<template>
	<view class="">
		<view class="box" v-if="video_mask==false">
			<view class="maskBox">
				<video class="imgs" style="width: 100%;height:100%;" :loop="true" :direction="-90" :src="imgUrl"
					:autoplay="true" mode="" @fullscreenchange="screenChange" id="myvideo" :muted="sound"></video>
			</view>
			<view class="text">
				<view class="topBox">
					<view>
						请在以下区域内替换文字和图片内容
					</view>
					<view class="czBox">
						<u-button :custom-style="czBoxStyle" type="success" size="mini" shape="circle" @click="resetFn">
							重置</u-button>
					</view>
				</view>
				<scroll-view class="scrollMain" :scroll-y="true">
					<view :class="textAreaFocus == index?'textAreaFocus':'contentBox'" style="margin:0 24rpx 15rpx;"
						v-for="(item,index) in default_text" :key="index">
						<view class="title">
							<view class="leftTitle">
								{{item.title}}
							</view>
							<view class="rightTitle">
								已输入{{item.content.length}}字/最多输入{{item.max_size}}字
							</view>
						</view>
						<view class="contentText" style="width: 100%;">
							<textarea class="contentTextArea" :border="true" v-model="item.content"
								placeholder-style="color: #FFFFFF;" :clearable="false" :custom-style="customStyle"
								:auto-height="true" :maxlength="item.max_size" @focus="testfocus(index)" />
						</view>
					</view>
					<!-- <view style="height: 10rpx;border-bottom: 1rpx rgba(255, 255, 255, 0.7) dotted;margin-bottom: 30%;">
					</view>
					<view style="height: 10rpx;"></view> -->
				</scroll-view>
			</view>
			<view class="mb" v-show="modelStatus" @click="closeModel">

			</view>
			<view class="bigVideo" v-show="modelStatus">
				<video class="imgs" style="width: 100%;height:100%;" :loop="true" :direction="-90" :src="imgUrl"
					:autoplay="true" mode="" @fullscreenchange="screenChange" id="myvideo" :muted="sound1"></video>
			</view>
			
			
			
			<!-- 展示价格弹框 -->
			<view  v-show="modelStatus" class="priceMask">
				
				<image class="imgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/tit2.png">
				</image>
				<view class="tips">
					您距离制作完成只差1步啦！
				</view>
				
				<view class="btnBoxs" v-for="(item,index) in btnList" :key="index">
					<view class="one" :class="{active:cur==index}" @click="clickZf(item,index)">
						<view class="left">
							{{item.price_name}}
						</view>
						<view class="right">
							<view v-if="item.tips=='选择最多'" class="xz" style="background: #915EFF;">
								{{item.tips}}
							</view>
						<view v-else-if="item.tips=='优惠更多'" class="xz" style="background:#16AC51;">
							{{item.tips}}
						</view>
						<view v-else class="xz" style="background: #455FE8;">
							{{item.tips}}
						</view>
							<view class="price" >
								<text >￥</text>{{item.price}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="agreement"
					>
					支付前请阅读<text @click="agreement()">《付费制作协议》</text>支付后不支持退款
				</view>
				
				<view class="botgroup">
					<view class="totals">
						合计 ¥ <text>{{btnList[cur].price}}</text>
					</view>
					<view class="btn" @click.stop="$noMultipleClicks(buy)">
						
						
						立即支付
					</view>
				</view>
				
				
				
				
			</view>
		<!-- 	<view class="imgsBox" v-show="modelStatus">
				<image class="imgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/tit2.png">
				</image>
			</view> -->
			<!-- <view class="zfModel" v-show="modelStatus" id="myModel">
				<view class="btnBoxs" v-for="(item,index) in btnList" :key="index">
					<view class="one" :class="{active:cur==index}" @click="clickZf(item,index)">
						{{item.price_name}}
						<view class="right">
							<view class="xz">
								{{item.tips}}
							</view>

							<view class="price" style="font-size: 40rpx;">
								<text style="font-size: 18rpx;">￥</text>{{item.price}}
							</view>
						</view>
					</view>
				</view>
				<view class="zfBox">
					<view class="btn" @click.stop="$noMultipleClicks(buy)">
						立即支付
					</view>
					<view class="agreement"
						style="margin-top: 20rpx;font-size: 20rpx;font-weight: bold;color: #b0b0c8;text-align: center;">
						支付前请阅读<text style="color: #FFFFFF;" @click="agreement()">《付费制作协议》</text>支付后不支持退款
					</view>
				</view>
			</view> -->
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			<view class="btnBox">
				<view class="btn">
					<view class="button2" @click.stop="$noMultipleClicks(make1)" v-if="coins !== 0">
						<image style="width: 35rpx; height: 35rpx; margin-right: 16rpx;" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/edit.png" mode=""></image>立即制作
						<view class="coins">
						
							（剩余{{coins}}次机会）
						</view>
					</view>
					<view class="button" @click.stop="$noMultipleClicks(make)" v-else>
						<image style="width: 35rpx; height: 35rpx; margin-right: 16rpx;" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/edit.png" mode=""></image>立即制作
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="video_mask==true">
			<view class="bg_video">
				<video class="vdo" :autoplay="true" :show-center-play-btn="false" :src="imgUrl" :loop="true"
					:controls="false" :muted="sound2"></video>
			</view>
			<view class="progress">
				<view class="textBox"
					style="color:#FFFFFF;text-align: center;margin-top: 30rpx;font-size: 30rpx;margin-bottom: 30rpx;">
					正在努力制作视频中，请耐心等待...
				</view>
				<view class="progressBox" style="width: 80%;margin: 0rpx auto;">
					<progress :percent="nums" activeColor="#3ab2ec" active-mode="forwards" backgroundColor="#000b27"
						active="true"></progress>
				</view>
				<view class="notice" style="margin: 0 auto;width: 42%;">
					<u-notice-bar mode="vertical" :list="list" :duration="2000" color="#FFFFFF" :volume-icon="false"
						bg-color="#191b1d"></u-notice-bar>
				</view>
			</view>

		</view>
		<view class="modelMore" v-if="modelMore">
			<view class="contentBox">
				<view class="loadingBox">
					<u-loading mode="flower" size="70"></u-loading>
				</view>

				<view class="text">
					当前模板制作失败o(╥﹏╥)o
				</view>
				<view class="text">
					本次制作不消耗制作币
				</view>
				<view class="text">
					请重新制作或制作其它喜欢的模板
				</view>
				<view class="btnBox1">
					<view class="text">
						点击下方按钮跳转至更多模板列表
					</view>
					<view class="text1" @click="moreModel">
						更多模板
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				video_mask: false,
				imgUrl: '',
				videoId: '',
				customStyle: {
					color: '#FFFFFF'
				},
				nums: 0,
				list: [
					'快马加鞭制作中',
					'正在抓紧制作中',
					'马上就好了 再等等...'
				],
				cur: 0,
				price: '',
				default_text: [],
				pId: 1,
				order_id: '',
				coins: 0,
				// 支付弹窗状态
				modelStatus: false,
				progressStatus: false,
				btnList: [],
				maskIds: '',
				nums: 0,
				sound: false,
				czBoxStyle: {
					width: '116rpx',
					height: '60rpx',
					borderColor: '#16AC51',
					backgroundColor: '#16AC51',
					fontSize: '28rpx',
					color: "#fff"
				},
				textAreaFocus: -1,
				modelMore: false,
				noClick: true,
				sound1: false,
				sound2: false,
				authRt: false,
				shake: true,
				creatorId: 0,
				accountId: 0,
				movId: 0,
				taskId: 0,
				collectionId: 0,
				urlId: 0,
				callbackId: 0,
			}
		},
		onLoad(options) {
			this.videoId = options.videoId
			this.getVideo()
			this.getMakeInfo()
			this.getPriceList()
			this.sound = false
			this.creatorId = options.creatorId ?? 0;
			this.accountId = options.accountId ?? 0;
			this.movId = options.movId ?? 0;
			this.taskId = options.taskId ?? 0;
			this.collectionId = options.collectionId ?? 0;
			this.urlId = options.urlId ?? 0;
			this.callbackId = options.callbackId ?? 0;
		},
		onReady() {
			this.video_mask = false
			this.modelMore = false
			this.modelStatus = false //这是原来的
			
			// this.modelStatus = true //这是先写死为了测试的
			this.nums = 0
		},
		onShow() {
			this.sound = false
		},
		methods: {
			getUserInfo() {
				let that = this
				return new Promise((resolve, reject) => {
					if (!uni.getStorageSync('userInfo')) {
						// 获取用户信息
						uni.getUserProfile({
							provider: '',
							success(res) {
								uni.setStorageSync('userInfo', res.userInfo);
								resolve()
							},
							fail() {
								uni.hideLoading()
								that.shake = true;
								reject()
							}
						});
					} else {
						resolve()
					}

				})
			},
			agreement() {
				uni.navigateTo({
					url: '/pages/sys/user_bags/agreement'
				})
			},
			moreModel() {
				uni.navigateBack()
				// uni.switchTab({
				// 	url: '/pages/sys/video/index'
				// })
			},
			testfocus(index) {
				this.textAreaFocus = index
			},
			change() {
				let clearInt = setInterval(() => {
					if (this.nums <= 60) {
						this.nums += 10
					}

					if (this.nums === 100) {
						clearInterval(clearInt)
						this.nums = 0
					}
				}, 1000)
			},
			checkStatus() {
				let checks = setInterval(() => {
					this.$u.api.video.getMakeStatus({
						makeId: this.maskIds,
					}).then(res => {
						if (res.code != 200) {
							this.$u.toast(res.msg);
							return;
						}
						if (res.data.status == 2) {
							this.sound2 = true
							clearInterval(checks)
							this.nums = 100
							uni.showToast({
								title: "制作成功",
								icon: "success"
							});
							this.video_mask = false
							this.getMakeInfo()
							uni.navigateTo({
								url: '/subpackFind/video_download?id=' + this.maskIds
							})
						} else if (res.data.status == 3 || res.data.status == false) {
							this.sound2 = true
							this.video_mask = false
							this.modelMore = true
							this.modelStatus = false
							this.sound = false
							clearInterval(checks)
							this.getMakeInfo()
						}
					})
				}, 2000)
			},
			async buy() {
				if (!this.shake) {
					return
				}
				await this.getUserInfo().then(res => {
					this.authRt = true
				}).catch(error => {
					this.$u.toast('请授权后支付');
				})
				if (!this.authRt) {
					return false;
				}
				this.$u.api.video.addOrder({
					types: 'video',
					priceId: this.pId,
					proId: this.videoId,
					nickname: '',
					avatar_url: '',
					creatorId: this.creatorId,
					accountId: this.accountId,
					movId: this.movId,
					taskId: this.taskId,
					collectionId: this.collectionId,
					urlId: this.urlId,
					callbackId: this.callbackId,
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.pay(res.data.order_id, res.data.order_token)
				})
			},
			// 调起支付
			pay(order_id, order_token) {
				const that = this;
				// 支付
				tt.pay({
					orderInfo: {
						order_id: order_id,
						order_token: order_token
					},
					service: 5,
					success(res) {
						that.shake = true;
						// 支付成功
						if (res.code == 0) {
							// 校验订单状态
							that.getOrderStatus(order_id)
						}
					},
					fail(res) {
						that.shake = true;
					}
				});
			},
			// 校验订单状态
			getOrderStatus(order_id) {
				uni.showLoading({
					title: '提交中...'
				})
				this.$u.api.video.getOrderStatus({
					dyOrderNo: order_id
				}).then(res => {
					uni.hideLoading();
					if (res.code != 200) {
						this.$utils.msg(res.msg);
						return false;
					} else {
						this.maskVideo()
					}

				})
			},
			maskVideo() {
				uni.showLoading({
					title: '加载中'
				})
				
				this.$u.api.video.makeVideo({
					videoId: this.videoId,
					content: JSON.stringify(this.default_text),
					creatorId: this.creatorId,
					accountId: this.accountId,
					movId: this.movId,
					taskId: this.taskId,
					callbackId: this.callbackId,
					appletId: this.vuex_appletId,
				}).then(res => {
					
					console.log(res,'&&&&&&');
					if (res.code == 201) {
						uni.showModal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false
						})
						return;
					}
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}

					uni.hideLoading()
					this.maskIds = res.data.makeId
					this.sound = true
					this.sound1 = true
					this.sound2 = false
					this.video_mask = true
					this.modelStatus = false
					this.change()
					this.checkStatus()
				})
			},
			clickZf(item, index) {
				this.cur = index
				this.price = item.price
				this.pId = item.id
			},
			// 获取价格
			getPriceList() {
				this.$u.api.video.getPriceList({
					types: 'video',
					appletId: this.vuex_appletId
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.btnList = res.data
				})
			},
			closeModel() {

				this.modelStatus = false
				this.sound = false
				this.sound1 = true
			},
			make() {
				this.$u.api.video.sensitive({
					content: JSON.stringify(this.default_text),
				}).then(res => {
					if (res.code == 201) {
						uni.showModal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false
						})
						return;
					}
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.modelStatus = true
					this.sound = true
					this.sound1 = false
				})

			},
			make1() {
				this.maskVideo()
			},
			resetFn() {
				this.getMakeInfo()
			},
			production() {
				uni.navigateTo({
					url: '/subpackFind/video_text?videoId=' + this.videoId
				})
			},
			getVideo() {
				this.$u.api.video.getVideoInfo({
					videoId: this.videoId
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.imgUrl = res.data.url
				})
			},
			getMakeInfo() {
				this.$u.api.video.getMakeInfo({
					videoId: this.videoId,
					appletId: this.vuex_appletId
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.coins = res.data.coins
					if (res.data.default_text) {
						this.default_text = res.data.default_text
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-btn--primary {
		width: 80rpx;
		height: 128rpx;
		color: #5c77fe;
	}

	.box {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.maskBox {
		width: 100%;
		height: 45%;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;

		.imgs {
			width: 100%;
			height: 750rpx;
		}
	}

	.imgsBox {
		width: 100%;
		height: 50%;
		position: fixed;
		// 编辑完成位置移动	
		bottom: 0;
		z-index: 400;

		.imgs {
			display: block;
			width: 340rpx;
			height: 37rpx;
			margin: 0 auto;
		}
	}

	.bigVideo {
		width: 100%;
		height: 50%;
		background: rgb(255, 255, 255);
		opacity: 1;
		position: fixed;
		z-index: 100;
		top: 0;
	}

	.mb {
		width: 100%;
		height: 50%;
		background: rgb(255, 255, 255);
		opacity: 0;
		position: fixed;
		top: 0;
		z-index: 200;
	}

	.zfModel {
		width: 100%;
		// height: 40%;
		background: #1A1C32;
		// background-image: url('https://tb.wuyouzhuan888.com/applet-icon/pay_backgroud.png');
		// background-size: 100% 100%;
		// background-repeat: repeat-y;
		// border-top-left-radius: 40rpx;
		// border-top-right-radius: 40rpx;
		// opacity: 1;
		position: fixed;
		bottom: 0;
		z-index: 300;

		.btnBoxs {
			display: flex;
			flex-direction: column;
			margin-top: 60rpx;
		}


		.one {
			width: 90%;
			height: 96rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #1f2035;
			border-radius: 15rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
			color: #a2a2b9;
			font-weight: bold;

			.right {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 45%;

				.xz {
					color: #181729;
					font-weight: bold;
					font-size: 20rpx;
					background-color: #b2b2ca;
					height: 30rpx;
					line-height: 30rpx;
					padding-left: 15rpx;
					padding-right: 15rpx;
					border-radius: 50rpx;
					text-align: center;
					background-size: 100%;
					background-repeat: no-repeat;
					margin-right: 30rpx;
				}
			}

			&.active {
				// 点击之后的样式
				border: 1px solid #f3d4a4;
				color: #ffe8c6;
				background: linear-gradient(90deg, #5e5e5e 0%, #171729 100%);

				.xz {
					color: #1a192a;
					// 选择最多背景图
					background: linear-gradient(0deg, #ffcf83 0%, #ffffff 100%);
				}
			}
		}

		.zfBox {
			width: 100%;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.btn {
			width: 90%;
			height: 14%;
			margin: 0 auto;
			background-color: #fff7ea;
			color: #443410;
			margin-top: 20rpx;
			height: 96rpx;
			border-radius: 15rpx;
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.text {
		width: 100%;
		height: 55%;
		background-color: #1b1b1d;

		.topBox {
			padding: 20rpx 24rpx 14rpx;
			// padding-left: 30rpx;
			// padding-right: 20rpx;
			// height: 10%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(115, 123, 154, 0.35) solid;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #737B9A;
			line-height: 35rpx;
		}

		.scrollMain {
			height: 90%;

			.contentBox {
				.title {
					display: flex;
					justify-content: space-between;
					// margin-bottom: 20rpx;
					padding: 32rpx 0 13rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #737B9A;

					.leftTitle {
						color: #8CC950;
						font-family: PingFang SC-Regular, PingFang SC;
					}

					.rightTitle {
						font-family: PingFang SC-Regular, PingFang SC;
					}
				}

				.contentText {
					.contentTextArea {
						width: 95%;
						color: #FFFFFF;
						// height: 90rpx;
						border-radius: 10rpx;
						padding: 25rpx 15rpx;
						background-color: rgba(45, 48, 85, 0.35);
						border: none;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.textAreaFocus {
				
				
				.title {
					display: flex;
					justify-content: space-between;
					// margin-bottom: 20rpx;
					padding: 32rpx 0 13rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #737B9A;
				
					.leftTitle {
						color: #8CC950;
						font-family: PingFang SC-Regular, PingFang SC;
					}
				
					.rightTitle {
						font-family: PingFang SC-Regular, PingFang SC;
					}
				}
				

				.contentText {
					.contentTextArea {
						width: 95%;
						color: #FFFFFF;
						// height: 90rpx;
						border-radius: 10rpx;

						background-color: #0a1d46;
						border: 1rpx solid #4caee4;

						padding: 25rpx 15rpx;
						// background-color:rgba(45, 48, 85, 0.35);
						// border: none;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.btnBox {
		width: 100%;
		height: 113rpx;
		background: #455FE8;
		display: flex;
		position: fixed;
		justify-content: center;
		align-items: center;

		bottom: 0;
		opacity: 0.9;

		.btn {
			width: 100%;
			height: 113rpx;

			.button {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 113rpx;
				font-size: 36rpx;

				color: #FFFFFF;

			}

			.button2 {

				height: 113rpx;
				font-size: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				color: #FFFFFF;
				position: relative;


				.button1 {
					display: flex;
					position: relative;
					top: 12rpx;
					align-items: center;
					justify-content: center;
				}

				.coins {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.85);
					line-height: 35rpx;
					// position: absolute;
					// font-size: 22rpx;
					// text-align: center;
					// left: 50%;
					// transform: translateX(-50%);
					// bottom: 10rpx;
				}
			}

			button::after {
				border: none;
			}
		}
	}

	.content {
		width: 100%;
		height: 100vh;
	}

	.bg_video {
		width: 100%;
		height: 1400rpx;
		z-index: 9;

		.vdo {
			width: 100%;
			height: 1400rpx;
		}
	}

	.progress {
		width: 100%;
		height: 230rpx;
		background-color: #191b1d;
		opacity: 1;
		position: fixed;
		bottom: 0;
	}

	.modelMore {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
		top: 0;
		left: 0;
		background-size: 100% 100%;
		z-index: 300;

		.contentBox {
			flex-direction: column;
			align-items: center;
			display: flex;
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			z-index: 500;

			.text {
				background: none;
				color: #FFFFFF;
				margin-top: 20rpx;
				font-size: 30rpx;
				text-align: center;
			}

			.btnBox1 {
				margin-top: 56rpx;
				flex-direction: column;
				align-items: center;
				display: flex;

				.text {
					color: #FFFFF;
					font-size: 20rpx;
				}

				.text1 {
					margin-top: 10rpx;
					background-color: #0a1818;
					border-radius: 50rpx;
					border: 1rpx solid #6cc4e8;
					width: 474rpx;
					height: 96rpx;
					color: #6cc4e8;
					text-align: center;
					font-size: 40rpx;
					line-height: 96rpx;
				}
			}
		}
	}

	.loadingBox {
		margin-bottom: 40rpx;
	}
	.priceMask{
		width: 100%;
		height: 819rpx;
		background: #1A1C32;
		position: fixed;
		bottom: 0;
		z-index: 400;
		border-radius: 32rpx 32rpx 0 0;
		
		.imgs {
			display: block;
			width: 340rpx;
			height: 37rpx;
			margin: 47rpx auto 19rpx;
		}
		.tips{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #4EF5FF;
			line-height: 33rpx;
			padding-bottom: 34rpx;
			text-align: center;
		}
		.agreement{
			padding-bottom: 20px;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 300;
			color: #B5C1FF;
			line-height: 28rpx;
			text{
				color: #FFFFFF;
			}
		}
		.botgroup{
			width:100%;
			height: 133rpx;
			background: #141627;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.totals{
				margin-left: 24rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				text{
					font-size: 64rpx;
					font-family: HYQiHei, HYQiHei;
					font-weight: normal;
					color: #FFFFFF;
					margin-left: 7rpx;
				}
			}
			.btn{
				margin-right: 24rpx;
				background: #16AC51;
				width: 263rpx;
				height: 80rpx;
				border-radius: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
		.btnBoxs{
			
			.one{
				padding: 0 46rpx 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto 24rpx;
				width: 702rpx;
				height: 128rpx;
				border-radius: 20rpx;
				background: rgba(45, 48, 85, 0.72);
				border: 1px solid rgba(45, 48, 85, 0.72);
				
				.left{
					font-size: 31rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 36rpx;
				}
				
				.right{
					font-size: 37rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 43rpx;
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.xz{
						margin-right: 6px;
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC;
						border-radius: 70rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 26rpx;
						width: 126rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				
				
				&.active {
					
					border: 1px solid #455FE8;
					
				}
			}
			
			
		}
	}
</style>
